<template>
  <div class="app-container">
    <el-row :gutter="12">
      <el-col class="el-card_body" :span="4" v-for="i in taskcategoryList" :key="i.pash">
        <el-card shadow="hover">{{i.name}}</el-card>
      </el-col>
      <el-col class="el-card_body" :span="4">
        <el-card shadow="hover">
          <el-button type="text" style="padding:0" @click="handleCreate">新增+</el-button>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form label-width="130px" :model="Form" :rules="FormRules" ref="dataForm">
        <el-form-item label="项目类别名称" prop="name" width="100%">
          <el-input v-model="Form.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="createData">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import { getTaskCategoryList, creatTaskCategory} from "@/api/taskCategory";
export default {
  data() {
    return {
      taskcategoryList: [],
      listLoading:false,
      dialogStatus: "",
      textMap: {
        create: "新增项目类别"
      },
      dialogFormVisible: false,
      Form: {
        name: ""
      },
      FormRules: {
        name: [
          { required: true, message: "请输入项目类别名称", trigger: "blur" }
        ]
      }
    };
  },
  created(){
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true;
      getTaskCategoryList().then(response => {
          this.taskcategoryList = response.data;
          this.listLoading = false;
        })
        .catch(e => {});
    },

    handleCreate() {
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate();
      });
    },

    createData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          let tempData = {};
          Object.assign(tempData, this.Form);
          creatTaskCategory(tempData).then(() => {
            this.getList();
            this.dialogFormVisible = false;
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
          });
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.el-card_body {
  text-align: center;
  margin-bottom: 20px;
}

</style>


